<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style >
      #box{
        width: 300px;
        height: 300px;
        background-color: red;
      }
  </style>
</head>
<body>
  <div id="app">
      <!-- 回顾原生js的事件
       鼠标事件：click dblclick  mouseover mouseout 
       mouseenter mouseleave  mousedown mouseup 
       mousemove   mousewheel滚轮  contextmenu 右键

       键盘事件 ： keydown keypress(特殊字符不触发)  keyup 

       表单事件 ：focus  input  blur submit change reset  select(文字选中事件)
    
       特殊事件: scroll resize 

        实用：vue事件对象 传递 需要实参 实参为$event
        -->
       <div id="box" @mousedown="getPos($event)">盒子</div>
       <!-- 键盘 
        
        实用： vue的键盘事件 修饰符  
        .enter .alt .ctrl .shift .delete .space 
        tab esc -->
       <!-- <input @keydown.enter="getKey"  /> -->
        <!--按下了 ctrl +alt +d  -->
       <input @keydown.ctrl.alt.d="getKey"  />
  </div> 
  <script src="./vue.js"></script>
  <script>
      new Vue({
        el:"#app",
        methods:{
          getPos(e){
            //  e  ---事件对象
            console.log(e,'鼠标按下的事件对象')
            // e.target 事件源--触发事件的dom元素
            // e.pageX e.pageY   相对于整个页面
            // e.clientX e.clientY  先对可视窗口
            // e.type 事件类型
            // e.layerX e.layerY  相对于当前元素的位置
            // e.stopPropagation() 阻止事件冒泡
          },
          getKey(e){
            // 按下回车 打印你好
            // 原生 if(e.ctrlKey && e.altKey && e.keyCode == 68)
            console.log("触发了键盘事件 按下了ctrl alt 加d")
            

          }
        }
      })
  </script>
</body>
</html>